<template>
  <view>
    <view class="first">
      <view class="first-top">
        <text>校园猫语</text>
        <view class="first-top-tbox">
          <text class="first-top-t1">趣享</text>
          <text class="first-top-t2">喵生活</text>
        </view>
      </view>
      
      <!-- <view class="first-login">
        <view class="first-account">
          账号：<uni-easyinput v-model="value1" placeholder="请输入账号"></uni-easyinput>
        </view>
        <view class="first-password">
          密码：<uni-easyinput v-model="value2" placeholder="请输入密码"></uni-easyinput>
        </view>
        <view class="first-login-btm">
          <button @click="toLogin()">登录</button>
          <button @click="toAccount()">注册</button>
        </view>
        
      </view> -->
      
      <view class="first-top-pbox">
        <image src="/static/first/group166.png" mode="" class="first-top-p1"></image>
        <image src="/static/first/group161.png" mode="" class="first-top-p2"></image>
      </view>
      <view class="first-mid">
        <image src="/static/first/group159.png" mode="" class="first-mid-p1"></image>
        <image src="/static/first/group163.png" mode="" class="first-mid-p2"></image>
        <image src="/static/first/group162.png" mode="" class="first-mid-p3"></image>
      </view>
      <view class="first-btm" >
        <text>猫语校园</text>
      </view>
      
    </view>
  </view>
</template>

<script>
  import {wxLogin} from '../../api/person.js'
  import{mapMutations} from 'vuex'
  import store from '../../store/store.js'
  export default {
    data() {
      return {
        timer: null,
        code: '666',
        value1: '',
        value2: ''
      };
    },
    onLoad() {
      console.log(666);
      this.beforeLogin()
      
    },
    methods:{
      ...mapMutations('User',['updateToken']),
     async beforeLogin() {
        console.log('登录中');
        // 客户端调用api向微信请求授权，获取临时授权code
        const res = await uni.login({
          provider: 'weixin'
        })
        console.log(res);
        this.code = res[1].code //code
        console.log(this.code);
        // 使用code发起请求获取token
        const {data:data} = await wxLogin(this.code)
        console.log(data);
        this.updateToken(data.data)
        
        const token = store.state.User.token
        console.log(token);
      clearTimeout(this.timer)
      this.timer = setTimeout(()=>{
        uni.switchTab({
        	url: '/pages/home/home'
        });
      },2000)
      },
      // toLogin(){
      //   this.updateToken('eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiIzIn0.nrLl6Feqxpml7BS7yPNbLHAT7TD4FgnQPWPlUYIzdEQ')
        
      //   const token = store.state.User.token
      //   uni.switchTab({
      //   	url: '/pages/home/home'
      //   });        
      // },
      toAccount(){
        this.value1 = ''
        this.value2 = ''
      }
    }
  }
</script>

<style lang="scss">
.first{
  background-image: url('~@/static/first/rectangle136.png');
  background-repeat: no-repeat;
  width: 750rpx;
  height: 1595rpx;
  position: relative;
  .first-top{
    display: flex;
    flex-direction: column;
    padding: 180rpx 50rpx;
    
    text{
      font-size: 35px;
      font-weight: bold;
      color: #707070;
      z-index: 999;
    }
    .first-top-tbox{
      display: flex;
      .first-top-t1{
        font-size: 35px;
        font-weight: bold;
        color: #707070;
        // z-index: 999;
      }
      .first-top-t2{
        font-size: 35px;
        font-weight: bold;
        color: #F79D59;
        // z-index: 999;
      }
    }
  }
  
  .first-login{
    display: flex;
    flex-direction: column;
    .first-account{
      display: flex;
      margin-bottom: 35rpx;
    }
    .first-password{
      display: flex;
    }
    .first-login-btm{
      display: flex;
    }
    z-index: 999;
    
  }
  
  .first-top-pbox{
    position: relative;
    .first-top-p1{
      position: absolute;
      width: 1013rpx;
      height: 911rpx;
      top: -695rpx;
      left: -130rpx;
    }
    .first-top-p2{
      position: absolute;
      width: 68rpx;
      height: 64rpx;
      top: -150rpx;
      right: 80rpx;
    }
  }

.first-mid{
  position: relative;
  .first-mid-p1{
    position: absolute;
    width: 532rpx;
    height: 486rpx;
    left: 95rpx;
    top: 25rpx;
  }
  .first-mid-p2{
    position: absolute;
    width: 462rpx;
    height: 416rpx;
    left: 150rpx;
    top: 135rpx;
  }
  .first-mid-p3{
    position: absolute;
    width: 100rpx;
    height: 94rpx;
    left: 85rpx;
    top: 650rpx;
  }
}

.first-btm{
  background-image: url('~@/static/first/path5.png');
  background-repeat: no-repeat;
  width: 755rpx;
  height: 330rpx;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: -33rpx;
 
  text{
    font-size: 30px;
    font-weight: bold;
    color: #F79D59;
  }
}
}
</style>
